<template>
    <div>
        <h3>显示</h3>
        <table class="table  table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>房型名称</td>
                    <td>图片</td>
                    <td>房型面积</td>
                    <td>是否有窗</td>
                    <td>入住人数</td>
                    <td>房型价格</td>
                    <td>房型状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in query.list">
                    <td>{{item.Id}}</td>
                    <td>{{item.HouseTypeName}}</td>
                    <td>
                        <img :src="item.Photo" alt="" width="100" height="100">
                    </td>
                    <td>{{item.Area}}</td>
                    <td>{{item.IsWindow?"有":"无"}}</td>
                    <td>{{item.Count}}</td>
                    <td>{{item.Price}}</td>
                    <td>{{item.State?"已售":"未售"}}</td>
                    <td>
                        <input type="button" value="详情" @click="detail(item.Id)">
                        <input type="button" value="修改" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <span>共<b> {{ query.totalCount }}</b>条</span>
        <span>共 <b>{{ query.totalPage }}</b>页</span>
        <span>每页显示<b>{{ can.pageSize }}</b>条</span>
        <span>当前第<b>{{ can.pageIndex }}</b>页/ <b>{{ query.totalPage }}</b>页</span>
        <select v-model="can.pageSize" @change="show">
            <option :value="item" v-for="item in arr" :key="item">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="goPage(1)" >
        <input type="button" value="下一页" @click="goPage(can.pageIndex+1)">
        
        <span v-for="item in query.totalPage" @click="goPage(item)">{{ item }}</span>

        <input type="button" value="上一页" @click="goPage(can.pageIndex-1)">
        <input type="button" value="尾页" @click="goPage(query.totalPage)">

        <input type="number" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="goPage(can.pageIndex)">


    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
const router=useRouter();
const route=useRoute();

onMounted(()=>{
    getlist();
})

const upd=(id:any)=>{
    router.push({
        path:'/houseupd',
        query:{id:id}
    })
}
const detail=(id:any)=>{
    router.push({
        path:'/housedeatil',
        query:{id:id}
    })
}
const arr=ref([2,4,6,8])
const show=()=>{
    can.pageIndex=1;
    getlist();

}
const goPage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>query.totalPage)
    {
        can.pageIndex=query.totalPage;
        return;
    }
    can.pageIndex=num;
    getlist();
}
const can=reactive({
    pageIndex:1,
    pageSize:2,
    housetype:'',
})
const query:any=reactive({
    list:[],
    totalCount:1,
    totalPage:1,
})

const getlist=()=>{
    axios({
        method:'get',
        url:'/api/House/GetHouseTypeList',
        params:
        can,
        
    })
    .then(res=>{
        console.log(res);
        query.list=res.data.list
        query.totalCount=res.data.totalCount
        query.totalPage=res.data.totalPage

    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>